.login-container {
  /* 换算相减的函数 减号两边都要有空格 */
  height: calc(100% - 50px);

  /* 弹性布局 水平方向居中 垂直方向也居中 */
  display: flex;
  justify-content: center;
  align-items: center;
}

.login-dialog {
  width: 500px;
  height: 400px;
  background-color: rgba(255, 255, 255, 0.5);

  border-radius: 10px;
}

/* 标题 */
.login-dialog h3 {
  text-align: center;
  /* 上下边距 */
  padding: 50px;
}

/* 针对一行设置样式 */
.login-dialog .row {
  width: 100%;
  height: 50px;
  /* 弹性布局 垂直水平方向 */
  display: flex;
  align-items: center;
  justify-content: center;
}

.login-dialog .row span {
  width: 100px;
  font-weight: 700;
}

#username,
#password {
  width: 200px;
  height: 40px;

  font-size: 20px;
  line-height: 40px;
  /* 输入框文字和边框左侧边距 */
  padding-left: 6px;
  /* 没有边框 没有轮廓线 */
  border: none;
  outline: none;
  border-radius: 10px;
}

#submit {
  width: 300px;
  height: 50px;

  background-color: rgb(20, 30, 40);
  /* 文本颜色 */
  color: wheat;
  font-size: 20px;

  border-radius: 10px;
  outline: none;
  border: none;

  margin-top: 10px;
}

/* 点击按钮的反馈效果 */
#submit:active {
  background-color: rgba(0, 0, 0, 0.5);
}
